@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
  @include S(border-radius, $v1, $v2, $v3, $v4);
}

@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
  background-color: $bgColor;
}

@mixin BreakText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin InlineAnimation($duration){
  $animName: autogen_anim_#{unique-id()};

  @at-root {
    @keyframes #{$animName}{
      @content;
    }
  }

  animation: $animName $duration;
}

@mixin BoxShadow($x, $y, $blur, $offset, $color){
  box-shadow: D($x) D($y) D($blur) D($offset) $color;
}

@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
  @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
}

@mixin TextShadow($color: rgb(222, 234, 238)){
  color: $color;
}

@mixin IncreasedClickArea($size) {
  &::after{
    content: '';
    position: absolute;
    top: #{D(-$size)};
    left: #{D(-$size)};
    right: #{D(-$size)};
    bottom: #{D(-$size)};
  }
}

@mixin DarkThemeOverride {
  @at-root html[data-theme="dark"] &,
    &[data-theme="dark"] {
    @content;
  }
}

@mixin DarkThemeInvert {
  @include DarkThemeOverride {
    filter: invert(1);
  }
}

@mixin onPc{
  @media (min-width: 1000px) {
    @content;
  }
}

@mixin onPe{
  @media (max-width: 999px) {
    @content;
  }
}

@mixin StyleBelowWidth($maxW) {
  @media (max-width: #{$maxW}) {
    @content;
  }
}

@mixin IconButtonColor($w, $color: #fff){
  overflow: hidden;
  width: $w;

  img{
    position: relative;
    left: -$w;
    filter: drop-shadow($color $w 0);
    width: 100%;
  }
}

@mixin AnimScaleShow($duration: .3s){
  @include InlineAnimation($duration){
    0%{transform: scale(0); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
  }
}

@mixin AnimScaleHide($duration: .3s){
  @include InlineAnimation($duration){
    0%{transform: scale(1); opacity: 1;}
    100%{transform: scale(0); opacity: 0;}
  }
}

@mixin AnimOpactiyShow($duration: .3s){
  @include InlineAnimation($duration){
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
}

@mixin AnimOpactiyHide($duration: .3s){
  @include InlineAnimation($duration){
    0%{opacity: 1;}
    100%{opacity: 0;}
  }
}